<template>
  <div>
    <Row>
      <Row class="funcContainer">
        <Col span="8">
          <Input
            search
            clearable enter-button
            size="large"
            placeholder="搜索角色"
            v-model="name"
            @on-search="queryRole"
            @on-clear="clearSearch"
          />
        </Col>
        <Col span="4" offset="12">
          <div class="btnContainer">
            <Button type="primary" class="btn" size='large' @click="deleteRoles"
              ><Icon type="ios-trash-outline" />&nbsp;删除</Button
            >
            <Button type="primary" class="btn" size='large' @click="registRole"
              ><Icon type="md-add" />&nbsp;新建角色</Button
            >
          </div>
        </Col>
      </Row>
      <Col span="24" class="tableContainer">
        <Table
          :columns="columns"
          :data="roleList"
          border
          @on-selection-change="selectionChange"
        >
          <template slot-scope="{ row }" slot="action">
            <Button
              type="primary"
              size="small"
              style="margin-right: 10px"
              @click="viewRole(row)"
              >查看</Button
            >
            <Button type="error" size="small" @click="deleteRole(row)"
              >删除</Button
            >
          </template>
        </Table>
        <div class="pageContainer">
          <Page
            :total="roleListTotal"
            show-elevator
            show-total
            @on-change="pageParams"
            :disabled="isPageDisabled"
          ></Page>
        </div>
      </Col>
    </Row>
    <Modal v-model="isModalShow" :title="modalTitle" @on-ok="okClick">
      <div id="modalContainer" v-if="isModalShow">
        <Row>
          <Col span="24" style="margin-bottom:25px" v-show="!isRegist"
            ><Button type="primary" style="float:right" @click="edit"
              >编辑</Button
            ></Col
          >
          <Col span="24">
            <Form
              ref="formValidate"
              :label-width="100"
              :model="roleForm"
              :disabled="!isEdit"
            >
              <FormItem label="角色名称" prop="roleName">
                <Input
                  v-model="roleForm.roleName"
                  placeholder="请输入角色名"
                ></Input>
              </FormItem>
              <FormItem label="角色描述" prop="desc">
                <Input
                  type="textarea"
                  :rows="3"
                  v-model="roleForm.desc"
                  placeholder="请输入角色描述"
                ></Input>
              </FormItem>
            </Form>
          </Col>
          <Col span="12" class="checkboxContainer">
            <div class="checkboxTitle">常规权限</div>
            <CheckboxGroup v-model="roleForm.authList.headerItems">
              <Checkbox label="一张图" class="checkboxItem" disabled>
                <span>&nbsp;一张图</span>
              </Checkbox>
              <Checkbox
                label="资源目录"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;资源目录</span>
              </Checkbox>
              <Checkbox
                label="在线智图"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;在线智图</span>
              </Checkbox>
              <Checkbox
                label="应用构建"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;应用构建</span>
              </Checkbox>
              <Checkbox
                label="典型案例"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;典型案例</span>
              </Checkbox>
              <Checkbox
                label="开发中心"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;开发中心</span>
              </Checkbox>
            </CheckboxGroup>
          </Col>
          <Col span="12" class="checkboxContainer">
            <div class="checkboxTitle">管理权限</div>
            <CheckboxGroup v-model="roleForm.authList.manageItems">
              <Checkbox
                label="用户管理"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;用户管理</span>
              </Checkbox>
              <Checkbox
                label="角色管理"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;角色管理</span>
              </Checkbox>
              <Checkbox
                label="服务管理"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;服务管理</span>
              </Checkbox>
              <Checkbox
                label="服务授权"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;服务授权</span>
              </Checkbox>
              <Checkbox
                label="一张图服务配置"
                class="checkboxItem"
                :disabled="!isEdit"
              >
                <span>&nbsp;一张图服务配置</span>
              </Checkbox>
            </CheckboxGroup>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<style scoped>
.funcContainer {
  width: 100%;
}
.btnContainer {
  display: flex;
  justify-content: space-around;
}
.btn {
  margin: 0 1rem;
  background: rgb(0, 63, 84) !important;
  color: rgb(255, 255, 255, 0.8);
}
.tableContainer {
  margin-top: 30px;
}
.pageContainer {
  text-align: center;
  margin-top: 50px;
}
#modalContainer {
  padding: 30px;
}
.checkboxItem {
  display: block;
  text-align: left;
}
.checkboxContainer {
  padding: 30px;
}
.checkboxTitle {
  line-height: 55px;
  font-size: larger;
  font-weight: bold;
}
</style>
<script>
export default {
  name: "RoleManage",
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "角色名称",
          key: "roleName"
        },
        {
          title: "成员",
          key: "members"
        },
        {
          title: "操作",
          slot: "action",
          width: 160,
          align: "center"
        }
      ],
      page: "",
      size: 10,
      roleList: [],
      roleListTotal: 0,
      name: "",
      isPageDisabled: false,
      selections: [],
      registInfo: {},
      isModalShow: false,
      modalTitle: "",
      roleForm: {
        id: 0,
        roleName: "",
        members: 0,
        desc: "",
        authList: {
          headerItems: ["一张图"],
          manageItems: []
        }
      },
      isRegist: true,
      isEdit: false
    };
  },
  methods: {
    queryRoleList() {
      this.axios
        .get("/role", {
          page: this.page,
          size: this.size
        })
        .then(res => {
          if (res.data.code === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].roleName == "default") {
                res.data.data.splice(i, 1);
                i--;
              } else if (res.data.data[i].roleName == "admin") {
                res.data.data.splice(i, 1);
                i--;
              }
            }
            this.roleList = res.data.data;
            this.roleListTotal = res.data.total;
          } else {
            this.$Message.info("当前没有角色！");
          }
        });
    },
    queryRole() {
      this.axios.get("/role/" + this.name).then(res => {
        if (res.data.code === 200) {
          this.roleList = [res.data.data];
        } else {
          this.$Message.info("角色不存在！");
        }
      });
      this.isPageDisabled = true;
    },
    clearSearch() {
      this.queryRoleList();
      this.isPageDisabled = false;
    },
    pageParams(page) {
      this.page = page;
      this.queryRoleList();
    },
    viewRole(row) {
      this.roleForm.id = row.id;
      this.axios.get("/role/" + row.roleName).then(res => {
        if (res.data.code === 200) {
          this.roleForm = res.data.data;
          this.isModalShow = true;
          this.isRegist = false;
          this.isEdit = false;
          this.modalTitle = "查看角色";
        }
      });
    },
    deleteRole(row) {
      this.axios({
        url: "/role",
        method: "DELETE",
        data: {
          roleNames: [row.roleName]
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.queryRoleList();
        } else {
          this.$Message.info("无法删除！");
        }
      });
    },
    selectionChange(selections) {
      this.selections = selections.map(selection => {
        return selection.roleName;
      });
    },
    deleteRoles() {
      this.axios({
        url: "/role",
        method: "DELETE",
        data: {
          roleNames: this.selections
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.queryRoleList();
        } else {
          this.$Message.info("无法删除！");
        }
      });
    },
    registRole() {
      this.modalTitle = "注册角色";
      this.isModalShow = true;
      this.isRegist = true;
      this.isEdit = true;
    },
    edit() {
      this.isEdit = true;
      this.modalTitle = "编辑角色";
    },
    okClick() {
      if (
        this.roleForm.authList.manageItems.length > 0 &&
        this.roleForm.authList.headerItems.indexOf("系统管理") == -1
      ) {
        this.roleForm.authList.headerItems.push("系统管理");
      }
      if (this.isRegist) {
        this.axios
          .post("/role", {
            roleName: this.roleForm.roleName,
            desc: this.roleForm.desc,
            authList: this.roleForm.authList
          })
          .then(res => {
            if (res.data.code == 200) {
              this.queryRoleList();
            } else {
              this.$Message.error("注册角色失败！");
            }
          });
      } else if (this.isEdit) {
        this.axios
          .put("/role/" + this.roleForm.roleName, {
            desc: this.roleForm.desc,
            authList: this.roleForm.authList
          })
          .then(res => {
            if (res.data.code == 200) {
              this.queryRoleList();
            } else {
              this.$Message.info("更新失败！");
            }
          });
      } else {
        return;
      }
    }
  },
  mounted() {
    this.queryRoleList();
  }
};
</script>
